<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <link href="main.css" rel="stylesheet" type="text/css ">
</head>
<body>
<div id="demo">
    <div id="small_box">
        <div id="float_box"></div>
       <img src="images/01_small.jpg" />
    </div>
    <div id="big_box">
        <img src="images/01_big.jpg" />
    </div>
</div>
</body>
<script>
    window.onload=function () {
        var o_demo = document.getElementById("demo");
        var o_smallBox = document.getElementById("small_box");
        var o_floatBox = document.getElementById("float_box");
        var o_bigBox = document.getElementById("big_box");
        var o_big_img = o_bigBox.getElementsByTagName("img")[0];
        o_smallBox.onmouseover=function () {
            o_floatBox.style.display="block";
            o_bigBox.style.display="block";
        };
        o_smallBox.onmouseout=function () {
            o_floatBox.style.display="none";
            o_bigBox.style.display="none";
        };
        o_smallBox.onmousemove=function (ev) {
            var o_event=ev||ev.event;
            /*clientX和clientY是鼠标的坐标，*/
            var left = o_event.clientX - o_demo.offsetLeft - o_smallBox.offsetLeft - o_floatBox.offsetWidth / 2 ;
            var top = o_event.clientY - o_demo.offsetTop - o_smallBox.offsetTop - o_floatBox.offsetHeight / 2 ;
            if(left < 0){
             left = 0;
             }else if(left > (o_smallBox.offsetWidth - o_floatBox.offsetWidth)){
             left = o_smallBox.offsetWidth - o_floatBox.offsetWidth;
             }if (top < 0) {
             top = 0;
             } else if (top > (o_smallBox.offsetHeight - o_floatBox.offsetHeight)) {
             top = o_smallBox.offsetHeight - o_floatBox.offsetHeight;
             }
            o_floatBox.style.left = left + "px";
            o_floatBox.style.top = top + "px";
            /*console.log(o_floatBox.offsetLeft);
            console.log(o_floatBox.offsetTop);*/
            var percentX=left / (o_smallBox.offsetWidth - o_floatBox.offsetWidth);
            var percentY=top / (o_smallBox.offsetHeight - o_floatBox.offsetHeight);
            console.log(percentX);
            console.log(percentY);
            o_big_img.style.left = -percentX * (o_big_img.offsetWidth - o_bigBox.offsetWidth) + "px";
            o_big_img.style.top = -percentY * (o_big_img.offsetHeight - o_bigBox.offsetHeight) + "px";
        }
    };
</script>
</html>